<script setup lang="tsx">
import { Button } from 'ant-design-vue';
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { useTable, useTableOperate, useTableScroll } from '@/hooks/common/table';
import { $t } from '@/locales';
import { getWarningListApi } from '@/service/api/businessApi';
import { useProjectStore } from '@/store/modules/project';
import DeviceDetail from '@/views/breedingManage/deviceManage/modules/device-detail.vue';
import UserSearch from './modules/search.vue';
const projectStore = useProjectStore();
const { tableWrapperRef, scrollConfig } = useTableScroll();
const {
  columns,
  columnChecks,
  data,
  getData,
  getDataByPage,
  loading,
  mobilePagination,
  searchParams,
  resetSearchParams
} = useTable({
  apiFn: getWarningListApi,
  apiParams: {
    pageNo: 1,
    pageSize: 10,
    projectId: projectStore.currentProject?.id
  },
  columns: (): any => [
    {
      key: 'deviceNo',
      dataIndex: 'deviceNo',
      title: '设备编号',
      width: 160
    },
    {
      key: 'assetName',
      dataIndex: 'assetName',
      title: '设备名称',
      width: 160
    },
    {
      key: 'categoryName',
      dataIndex: 'categoryName',
      title: '分类',
      width: 160
    },
    {
      key: 'location',
      dataIndex: 'location',
      title: '所处位置',
      width: 160
    },
    {
      key: 'status',
      dataIndex: 'status',
      title: '状态',
      width: 160,
      customRender: ({ record }: any) => (
        <div class="flex items-center gap-4px">
          {record.status === 1 ? <ArrowDownOutlined style="color: red" /> : <ArrowUpOutlined style="color: red" />}
          {record.status === 1 ? '偏低' : '偏高'}
        </div>
      )
    },
    {
      key: 'field',
      dataIndex: 'field',
      title: '当前值',
      width: 160
    },
    {
      key: 'unit',
      dataIndex: 'unit',
      title: '单位',
      width: 160
    },
    {
      key: 'between',
      dataIndex: 'between',
      title: '阈值范围',
      width: 160,
      customRender: ({ record }: any) =>
        record.deviceType === 1 ? (
          <span>
            {record.lowAlarm} - {record.hiAlarm}
          </span>
        ) : undefined
    },
    {
      title: '创建时间',
      dataIndex: 'gmtCreated',
      key: 'gmtCreated',
      width: 160
    },
    {
      key: 'operate',
      title: $t('common.operate'),
      align: 'center',
      width: 80,
      fixed: 'right',
      customRender: ({ record }: any) => (
        <div class="flex-center gap-8px">
          <Button type="primary" ghost size="small" onClick={() => detail(record.id)}>
            查看
          </Button>
        </div>
      )
    }
  ]
});

const { checkedRowKeys } = useTableOperate(data as any, getData);

const detailVisible = ref(false);

function detail(id: number) {
  detailVisible.value = true;
  console.log(id);
}
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
    <ACard
      title="告警列表"
      :bordered="false"
      :body-style="{ flex: 1, overflow: 'hidden' }"
      class="flex-col-stretch sm:flex-1-hidden card-wrapper"
    >
      <template #extra>
        <TableHeaderOperation
          v-model:columns="columnChecks"
          :disabled-delete="checkedRowKeys.length === 0"
          :loading="loading"
          :add-btn="false"
          @refresh="getData"
        />
      </template>
      <ATable
        ref="tableWrapperRef"
        :columns="columns"
        :data-source="data"
        size="small"
        :scroll="scrollConfig"
        :loading="loading"
        row-key="id"
        :pagination="mobilePagination"
        class="h-full"
        children-column-name="childDeviceInfo"
      />
    </ACard>

    <DeviceDetail :visible="detailVisible"></DeviceDetail>
  </div>
</template>

<style scoped></style>
